<!-- 新建订单 -->
<template>
  <jke-modal :visible.sync='jkeForm.visible' :width='1200' :title='jkeForm.title' :fullscreen.sync='jkeForm.fullscreen'
             :switchFullscreen='jkeForm.switchFullscreen'>
    <a-form-model ref='ruleForm' :rules='rules' :model='buildform'>
      <div class='form-body' :style="{ height: jkeForm.fullscreen ? 'calc(100vh - 112px)' : 'auto' }">
        <a-card id='aCord' title='基本信息' :bordered='false'>
          <a-row>
            <a-col :span='7'>
              <a-form-model-item label='字段名称' prop='fieldName'>
                <a-input v-model='buildform.fieldName' :maxLength='50' placeholder='请输入' />
              </a-form-model-item>
            </a-col>
            <a-col :span='1'></a-col>
            <a-col :span='7'>
              <a-form-model-item label='字段类型' prop='fieldType'>
                <a-select :getPopupContainer='getPopupContainer' v-model='buildform.fieldType' :disabled='Edit'
                          placeholder='请选择' @change='changeType'>
                  <a-select-option v-for='item in formTypeList' :value='item.value'>
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card style='margin-top: 12px' title='字段规则' :bordered='false'>
          <a-row>
            <a-col :span='7'>
              <a-form-model-item label='字段属性' prop='fieldMust'>
                <a-radio-group v-model='buildform.fieldMust'>
                  <a-radio value='1'> 只读</a-radio>
                  <a-radio value='2'> 必填</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span='1'></a-col>
            <!-- 新增 -->
            <a-col :span='7' v-if='buildform.fieldType == 3 || buildform.fieldType == 4'>
              <a-form-model-item label='位数' :maxLength='10' prop='fieldLength'>
                <a-input-number :min='1' style='width: 100%' v-model='buildform.fieldLength' :max='12'
                                placeholder='请输入' />
              </a-form-model-item>
            </a-col>
            <a-col :span='7' v-else>
              <a-form-model-item label='引导文字' :maxLength='30' prop='placeholder'>
                <a-input v-model='buildform.placeholder' placeholder='请输入' :maxLength='30'
                         @focus="buildform.placeholder = ''" />
              </a-form-model-item>
            </a-col>
            <a-col :span='1'></a-col>
          </a-row>
          <!-- 新增 -->
          <a-row v-if='buildform.fieldType == 3 || buildform.fieldType == 4'>
            <a-col :span='7'>
              <a-form-model-item label='引导文字' :maxLength='30' prop='placeholder'>
                <a-input v-model='buildform.placeholder' placeholder='请输入' :maxLength='30'
                         @focus="buildform.placeholder = ''" v-if='buildform.fieldMust==2' />

                <!--                <a-input-number v-model='buildform.placeholder' placeholder='请输入' :maxLength='30'-->
                <!--                                @focus="buildform.placeholder = ''" style='width: 100%' v-if='buildform.fieldMust==1' />-->

                <div v-if='buildform.fieldMust == 1'>
                  <!--整数-->
                  <a-input-number style='width: 100%' v-model='buildform.placeholder'
                                  placeholder='请输入' :step='1' :max='getMaxValue(buildform.fieldLength * 1)'
                                  :min='0' :precision='0' v-if='buildform.fieldType == 3'>
                  </a-input-number>
                  <!--小数-->
                  <a-input-number :step='0.0001' style='width: 100%' v-model='buildform.placeholder'
                                  placeholder='请输入' :min='0.0001'
                                  :max='getMaxValueForDigits(buildform.fieldLength * 1)'
                                  :formatter='(value) => onInput(value)' v-if='buildform.fieldType == 4' />
                </div>

                <div v-else>
                  <a-input v-model='buildform.placeholder' placeholder='请输入' :formatter='value => value.substr(0, buildform.fieldLength)'
                           :parser='value => value.substr(0, buildform.fieldLength)' />
                </div>

              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span='7'>
              <a-form-model-item label='说明提示'>
                <a-input v-model='buildform.explanationPrompt' :maxLength='100' type='textarea' placeholder='请输入' />
              </a-form-model-item>
            </a-col>
            <a-col :span='1'></a-col>
          </a-row>
        </a-card>
        <a-card title='自定义字段预览' :bordered='false' style='margin-top: 12px; margin-bottom: 12px; flex: 1'>
          <a-row>
            <a-col :span='7'>
              <PreviewForm :basicDynamicFieldConfigSaveEntityParams='buildform'></PreviewForm>
            </a-col>
            <a-col :span='1'></a-col>
          </a-row>
        </a-card>
      </div>
    </a-form-model>
    <div class='footer-submit' :class="jkeForm.fullscreen ? 'form-footer' : ''">
      <a-button @click='handlerCancel' style='margin-right: 10px'> 取消</a-button>
      <a-button type='primary' :loading='loadingSubmit' @click='submitProcess'> 提交</a-button>
    </div>
  </jke-modal>
</template>
<script>
import { getFieldTypeDict, saveEntity, queryForm, editForm } from '@/api/productOrder'
import crumbs from '@/components/crumbs.vue'
import PreviewForm from '@/views/planManage/components/PreviewForm'

export default {
  data() {
    return {
      Edit: false,
      buildform: {
        formType: '',
        fieldName: '',
        fieldType: undefined,
        fieldMust: '',
        placeholder: '',
        explanationPrompt: '',
        id: '',
        fieldLength: 12
      },
      formTypeList: [],
      jkeForm: {
        title: '新建自定义字段',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      rules: {
        fieldName: [{ required: true, message: '请输入' }],
        fieldType: [{ required: true, message: '请选择' }],
        placeholder: [{ required: true, message: '请输入' }],
        fieldLength: [{ required: true, message: '请输入' }]
      },
      loadingSubmit: false
    }
  },
  components: {
    crumbs,
    PreviewForm
  },

  watch: {
    handler() {
      if (!this.jkeForm.visible) {
        this.form = {}
        this.pronames = ''
      }
    }
  },

  methods: {
    changeType(e) {
      console.log(e, 'eee')
      if (e == 3 || e == 4) {
        this.buildform.placeholder = ''
      }
    },
    onInput(event) {
      let value = event + ''
      // 截断小数点后超过4位的部分
      if (value.includes('.')) {
        let parts = value.split('.')
        if (parts[1].length > 4) {
          value = parts[0] + '.' + parts[1].substring(0, 4)
        }
      } else {
        value = event
      }
      return value
    },
    getMaxValueForDigits(digitCount) {
      if (digitCount <= 0) {
        throw new Error('Digit count must be a positive integer.')
      }
      return (Math.pow(10, digitCount) - 1) + 0.9999
    },
    getMaxValue(count) {
      if (count <= 0) {
        throw new Error('Digit count must be a positive integer.')
      }
      return (Math.pow(10, count) - 1)
    },
    getPopupContainer() {
      return document.getElementById('aCord')
    },
    handlerCancel() {
      this.jkeForm.visible = false
    },
    getListAll() {
      getFieldTypeDict().then((res) => {
        if (res.code == 200) {
          this.formTypeList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },

    createForm() {
      this.buildform = {
        formType: this.buildform.formType,
        fieldName: '',
        fieldType: undefined,
        fieldMust: '',
        placeholder: '',
        explanationPrompt: '',
        id: undefined,
        fieldLength: 12
      }
    },

    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    /* 根据是新增或者编辑,获取详情 */
    initForm(query) {
      this.buildform.formType = query.formType
      this.getListAll()
      this.jkeForm.visible = true
      if (query && query.id) {
        this.jkeForm.title = '编辑自定义字段'
        this.Edit = true
        this.queryForm(query.id)
      } else {
        // 订单新建
        this.createForm()
        this.jkeForm.title = '新建自定义字段'
        this.buildform.placeholder = '请输入'
        this.Edit = false
      }
    },
    queryForm(id) {
      queryForm({ id }).then((res) => {
        console.log(res, 'res')
        if (res.code == 200) {
          this.buildform = res.result
          this.buildform.fieldType = String(this.buildform.fieldType)
          this.buildform.fieldMust = String(this.buildform.fieldMust)
        }
      })
    },
    // 新建 提交
    submitProcess() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loadingSubmit = true
          if (!this.Edit) {
            saveEntity(this.buildform).then((res) => {
              this.loadingSubmit = false
              if (res.code == 200) {
                this.$antdMessage.success(res.message)
                this.jkeForm.visible = false
                this.resetForm()
                this.$parent.requestData()
              } else {
                this.$antdMessage.error(res.message)
              }
            })
          } else {
            this.loadingSubmit = true

            this.EditProcess()
          }
        }
      })
    },
    EditProcess() {
      editForm(this.buildform).then((res) => {
        this.loadingSubmit = false

        if (res.code == 200) {
          this.$antdMessage.success(res.message)
          this.jkeForm.visible = false
          this.resetForm()
          this.$parent.requestData()
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    // 输入的必须是正数，当输入其他数字形式时提交时进行校验，校验不通过时，进行toast提示：“请输入正确生产数量！”，校验成功，则生成对应数据
    handleSubmit(processDataVo) {
      let parameters = {}
      this.loadingSubmit = true
      this.form.validateFields((err, formValues) => {
        if (!err) {
          this.loadingSubmit = false
        } else {
          this.loadingSubmit = false
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';

/deep/ .ant-form-vertical {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .ant-form-item {
    width: 30%;
  }
}

.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}

.form-body {
  display: flex;
  flex-direction: column;
}

.form-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 100px;
  z-index: 2;
}

/deep/ .ant-card-body {
  height: auto !important;
}
</style>
